<template>
  <!-- 资讯列表页面 -->
  <div style="padding-left: 20px">
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="formInline.status" placeholder="状态" clearable>
            <el-option label="未审核" value="未审核" />
            <el-option label="审核通过" value="审核通过" />
            <el-option label="审核不通过" value="审核不通过" />
            <el-option label="推荐" value="推荐" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.title" placeholder="标题" clearable />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.categoryId"
            clearable
            placeholder="请选择栏目"
          >
            <el-option
              v-for="(item, index) in category"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 发布资讯 -->
      <el-button type="success" round @click="release">发布资讯</el-button>
    </div>
    <!-- 表格展示数据 -->
    <div>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index" />
        <el-table-column label="封面">
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 80px"
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
            >
              <div slot="error" >
               <div style="margin-top:40px;
               font-size:20px;
                ">
                 <span>暂无图片</span>
               </div>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="风采">
          <template slot-scope="scope">
            <div
              style="
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
              "
            >
              <span
                >{{ scope.row.title }}
                <!-- {{scope.row.category.name}} -->
              </span>

              <span>{{
                scope.row.category ? scope.row.category.name : null
              }}</span>

              
              <span>{{
                scope.row.baseUser ? scope.row.baseUser.registerTime : null | fmtDateTime 
              }}</span>
              
            
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-button  size="small"
              :type=" 
                scope.row.status == '推荐'
                  ? 'success'
                  : scope.row.status == '审核通过'
                  ? 'primary'
                  : scope.row.status == '审核不通过'
                  ? 'danger'
                  : 'info'
              "
              >{{ scope.row.status }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success" round
              @click="recommend(scope.row.id)"
              >推荐</el-button
            >
            <el-button size= "mini" type="primary" round @click="examine(scope.row.id)"
              >审核</el-button
            >
            <el-button
              size="mini"
              type="danger" round
              @click="delectMessage(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div style="text-align: right; margin-top: 10px">
      <el-pagination
        :current-page="paging.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="paging.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { findAll } from "@/api/zixunfl";
import { pageQuery, changeStatus, deleteById } from "@/api/article";
export default {
  data() {
    return {
      // 先获取所有栏目信息
      category: [],
      // 搜索框信息
      formInline: {
        status: "",
        title: "",
        categoryId: "",
      },
      // 分页信息
      paging: {
        page: 1,
        pageSize: 5,
      },
      total: 0,
      // 表格展示数据
      tableData: [],
      //
      loading: false,
    };
  },
  computed: {},
  watch: {
    paging: {
      handler() {
        this.searchAll();
      },
      deep: true,
    },
  },
  created() {
    // 先获取所有栏目信息
    this.findCategory();
    // 根据搜索框信息和分页信息获取数据
    this.searchAll();
  },
  mounted() {},
  methods: {
    // 先获取所有栏目信息
    async findCategory() {
      const res = await findAll();
      this.category = [...res.data];
    },
    // 查询方法
    onSubmit() {
      this.searchAll();
    },
    // 根据搜索框信息和分页信息获取数据
    async searchAll() {
      this.loading = true;
      const temp = { ...this.paging, ...this.formInline };
      const res = await pageQuery(temp);
      this.tableData = [...res.data.list];
      console.log(this.tableData);
      this.total = res.data.total;
      this.loading = false;
    },
    // 点击分页
    handleSizeChange(val) {
      this.paging.pageSize = val;
    },
    handleCurrentChange(val) {
      this.paging.page = val;
    },
    // 修改状态为推荐
    async recommend(id) {
      const temp = { id: id, status: "推荐" };
      const res = await changeStatus(temp);
      this.searchAll();
    },
    // 审核状态
    examine(id) {
      this.$confirm("审核该变状态, 是否继续?", {
        confirmButtonText: "审核通过",
        cancelButtonText: "审核不通过",
        type: "warning",
        center: true,
      })
        .then(async () => {
          const temp = { id: id, status: "审核通过" };
          const res = await changeStatus(temp);
          this.searchAll();
          this.$message({
            type: "success",
            message: "审核通过!",
          });
        })
        .catch(async () => {
          const temp = { id: id, status: "审核不通过" };
          const res = await changeStatus(temp);
          this.searchAll();
          this.$message({
            type: "info",
            message: "审核不通过",
          });
        });
    },
    // 删除
    async delectMessage(id) {
      const res = await deleteById({ id });
      this.searchAll();
    },
    // 发布资讯
    release() {
      // 路由跳转
      this.$router.push("/news/fabu");
    },
  },
};
</script>
<style scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
</style>
